.page-content {
    flex-flow: row !important;
    padding: 20px;
}

.panel {
    padding: 12px 0;
}

.left-panel {
    width: 68%;
    height: 100%;
    padding-left: 24px;
    padding-right: 24px;
    /*background-color: orange;*/
}

.right-panel {
    flex: 1;
    height: 100%;
}

.box {
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    border: 1px solid #EFEDEE;
    padding: 28px 8px 18px;
    margin-bottom: 20px;
}

.box > .title {
    position: absolute;
    top: -10px;
    display: inline-block;
    padding: 0 6px;
    background-color: lemonchiffon;
}

.person-info {

}

.person-info > .title {
    padding: 2px 8px;
}

.person-info > .avatar {
    width: 200px;
    height: 200px;
}

.person-info > .name {
    padding: 18px 8px;
}

.person-info > .description {
    color: #ffb0fa;
}

.contact {
    display: flex;
    flex-flow: row !important;
    justify-content: center;
    align-items: center;
    padding: 28px 0 18px;
}

.contact > .approach {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
    background-color: lemonchiffon;
    border: 1px solid #EFEDEE;
    border-radius: 2px;
}

.approach:not(:last-of-type) {
    margin-right: 12px;
}

.approach:hover {
    border-color: orange;
}

.approach > img {
    width: 38px;
    height: 38px;
}

.read-rank {
    padding: 30px 12px 0;
}

.rank-item {
    width: 100%;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #EFEDEE;
    padding: 12px 0;
    color: gray;
}

.rank-item:hover {
    color: orange;
    cursor: pointer;
}

.article {
    display: flex;
    flex-flow: row;
    /*align-items: center;*/
    border-bottom: 1px solid #EFEDEE;
    margin-bottom: 20px;
    padding: 0 0 14px;
    color: gray;
}


.article-left > .icon {
    width: 240px;
    height: 200px;
}

.article-right {
    padding: 8px 12px 8px;
}

.article-info {
    font-size: 12px;
}

.article-info > span {
    margin-right: 12px;
}

.article-title {
    display: block;
    font-size: 18px;
    font-width: 900;
    color: #2A87B9;
    text-decoration: none;
    padding: 20px 18px;
    cursor: pointer;
}

.article-title:hover {
    color: orange;
    cursor: pointer;
}

.article-des {
    font-size: 14px;
    text-indent: 28px;
}

.pagination {
    display: flex;
    flex-flow: row;
    align-items: center;
    padding: 20px 12px;
}

.paginator {
    flex: 1;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
}

.paginator-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    font-size: 16px;
    cursor: pointer;
    background-color: lemonchiffon;
    color: gray;
    border: 1px solid #EFEDEE;
    border-radius: 2px;
}

.paginator-btn:hover {
    color: orange;
    border-color: orange;
}

.paginator-btn.more:hover {
    color: gray !important;
    border-color: #EFEDEE !important;
    cursor: auto !important;
}

.paginator-btn:not(:last-of-type) {
    margin-right: 12px;
}

.paginator-btn.jump {
    width: 68px;
}

.paginator-btn.actived {
    color: #1D82FE !important;
    border-color: #1D82FE !important;
}